<template>
  <view>
    <!-- 公共组件-每个页面必须引入 -->
    <public-module></public-module>
    <view class="u-padding-20" v-if="!hasLogin">
      <u-empty text="请先登陆" mode="permission"></u-empty>
    </view>
<view  v-else>
    <view class="u-padding-20">
		<u-loading-page :loading="loadstatus"></u-loading-page>
      <view class="mingpian u-m-b-30">
		<view class="lefttips">会员卡</view>
        <!--<view class="htitle u-m-t-50 u-m-b-2">
           <i><u-icon name="bankcard" custom-prefix="customicon" size="30"></u-icon></i> 

        </view>-->
		<view class="u-m-t-50 u-p-t-40 u-p-b-30" style="color: #909399;">
			
		<u-radio-group v-model="level_value" placement="column">
					<u-radio
						@change="levle_change" v-for="(item, index) in leveltypelist"
						:label="item.type_name +' / '+item.limit_name+' '+ item.price+'元'"
						:key="index"
						:name="index"
						:disabled="!item.status">
					</u-radio>
	  
        </u-radio-group>
		</view>
		
      </view>
	  
	  
	<view class="base-panel-box u-m-b-20">
	    <view class="htitle">
	      <view>支付方式</view>
	    </view>
	    <view class="item">
			<u-radio-group v-model="pay_coininfo_id" placement="column">
			  <u-radio
			  @change="coin_change" v-for="(item, index) in user.userInfo.coinlist"
			  :key="index"
			  :name="item.id"
			  :label="item.name +' 可用: '+(item.balance_available * 1).toFixed(2)+' '+ item.unit"
			  v-if="item.useforpay==1"
			  >
			</u-radio>
			</u-radio-group>
	    </view>
	</view>
	  
	 <view class="content">
        <view class="htitle u-m-t-30 u-m-b-2"> 详情</view>
		<view class="item"><rich-text :nodes="content"></rich-text></view>
	 </view>
	 <u-gap height="150"></u-gap>
      
    </view>
	  <view class="flexbottom">
		<view class="u-padding-20">
			  <u-button type="success" @click="confirm()" :hairline="false" class="custom-style" :customStyle="submitStyle">购买</u-button>
		</view>
	  </view>
	
	</view>
  </view>
</template>


<script>
import { mapState, mapMutations } from "vuex";
// #ifdef MP-WEIXIN
import { setPay } from "@/config/pay";
// #endif
export default {
  data() {
    return {
      flow_list: [],
      hasLogin: false,
      loadStatus: "loadmore",
      loadstatus: false,
      loadstxt: "loading...",
      leveltypelist: [],
      level_value: "",
      coin_list: [],
      price: 0, //等级1价
      platform: "",
	  content:"",
	  pay_coininfo_id: '',
	  select_coininfo: [],
	  select_coininfo_id: '1',
	  submitStyle:{
		background: '#4B536A',
		color: '#FFFFFF',
		borderRadius: '50rpx',
		border: 'none'
	  }
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  onLoad() {
    this.hasLogin = this.$store.getters.loginFlag;
	if (this.hasLogin){
		this.select_coininfo = this.user.userInfo.coinlist[0];
		this.pay_coininfo_id = this.select_coininfo.id;
	}else{
		return;
	}
    this.get_level_type();
    this.getcoin();
    // #ifdef MP-WEIXIN || MP
    this.platform = "weixin";
    // #endif
    // #ifdef H5
    this.platform = "h5";
    // #endif
    // #ifdef APP-PLUS
    this.platform = "app";
    // #endif
	this.get_viewnews(18)
  },

  methods: {
    coin_change(e) {
		
		let _this=this
		this.user.userInfo.coinlist.forEach(function (item, index) {
			if (item.id==e){
				_this.select_coininfo=item
			}
		})
      this.select_coininfo_id = this.select_coininfo.id;

    },
    levle_change(e) {
      this.level_value = e;

      for (let i = 0; i < this.leveltypelist.length; i++) {
        console.log(this.leveltypelist);
        if (this.leveltypelist[i].type_id == this.level_value) {
          this.price = this.leveltypelist[i].price;
          break;
        }
      }
      console.log(this.price);
    },

	  get_viewnews(newsid){
		this.openwiddowpops=true;
        this.$api("archives.article_view", {
			content_id:newsid
		}).then((res) => {
            if (res.code == 200) {
				this.content=res.data.content
            }
          }).catch((e) => {});
	  },
    get_level_type() {
      return new Promise((resolve, reject) => {
        this.$api("user.leveltypemanage", {
			
		}).then((res) => {
            this.leveltypelist = res.data;
          }).catch((e) => {});
      });
    },
    getcoin() {
      return new Promise((resolve, reject) => {
        this.loadstatus = true;
        this.$api("assets.coin_list", {})
          .then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.coin_list = res.data.list;
            }
            resolve(true);
            this.loadstatus = false;
          })
          .catch((e) => {
            this.loadstatus = false;
            resolve(false);
          });
      });
    },

    confirm() {
      if (this.level_value == "") {
        this.$tools.msg("请选择一个会员类型");
      }

      if (this.pay_coinclass != 1) {
        this.confirm_ok();
        return;
      }
      uni.showModal({
        title: "温馨提示",
        content:
          "如果余额不足，将跳转到充币页面。",
        success: (res) => {
          if (res.confirm) {
            setTimeout(() => {
              this.confirm_ok();
            }, 500);
          }
        },
      });
    },

    confirm_ok() {
		console.log('id====',this.select_coininfo_id)
      return new Promise((resolve, reject) => {
        this.$api("user.levelupgradepay", {
          users_id: this.user.userInfo.users_id,
          type_id: this.level_value,
          pay_coinclass: this.select_coininfo_id,
          platform: this.platform,
        }).then((res) => {
            console.log(res);
			if (res.code==400){
        this.$tools.msg(res.msg);
				if (res.data.code==0){
					
					
					
				this.$api("assets.buycoinorder", {
					coinid:1,
					packagevalue:this.price
				}).then((res) => {
					console.log(res)
					this.code=res.data.code
					if (res.data.code==202){
						console.log('202')
					}else if(res.data.code==200){
						//this.orderinfo=res.data
					  setTimeout(() => {
							this.$Router.push({
								path: "/pages/componentsA/my/assets/coingcoinorder",
								query: {},
							});
					  }, 1500);
					}
				}).catch((e) => {});
							
					
					
					
					
					
					
					

				}
				return;
			}

			
            if (res.data.needpay == 1) {
              
				// #ifdef MP-WEIXIN
					this.onAppWxPay(res.data.paydata)
				// #endif
				// #ifdef H5

					//this.$u.toast("调起支付失败，请在小程序内支付。");
				//#endif
				
            } else {
			  //this.$store.commit("USER_INFO", res.data);
              this.$store.dispatch("getUserInfo");

              this.$tools.msg(res.data.msg);
              setTimeout(() => {
                uni.navigateBack(1);
                // this.$Router.push({
                // 	path: '/pages/componentsA/my/my',
                // 	query: {}
                // });
              }, 1500);
            }
          }).catch((e) => {});
      });
    },
	
    onAppWxPay(paydata) {
		console.log(paydata)
      setPay({
          type: paydata.onlinepay_type, // APP微信支付=wxpay，APP支付宝支付=alipay，微信小程序支付=smallPay
          price: paydata.price, // 价格，
          title: paydata.title, // 标题
          orderNo: paydata.orderNo, // 订单编号
		  table:paydata.table,
		  coinid:paydata.coinid
        },(res) => {
          // 小程序支付的回调
          if (res.success) {
            uni.showToast({
              title: "支付成功",
              icon: "none",
            });
          } else {
            uni.showToast({
              title: "支付失败，" + res.data,
              icon: "none",
            });
          }
		  this.$Router.push({
			path: "/pages/componentsA/my/my",
			query: {},
		  });
        }
      );
    },
	
	
  },
};
</script>
<style lang="scss" scoped>
.ssradio {
  border: solid 0px #2b85e4;
  padding: 10rpx 20rpx 10rpx 0rpx;
  margin: 10rpx 0rpx;
  border-radius: 20rpx;
  color: #FFFFFF;
}
.ppradio {
  padding: 5rpx 20rpx;
}
.content{
	color: #999999;
	line-height: 180%;
}

.mingpian{
	background: #F1F2F7;
	color: #4B536A;
	border-radius: 18rpx;
	padding: 20rpx;
	position: relative;
	.lefttips{
		background: #4B536A;
		height: 60rpx;
		line-height: 50rpx;
		border-radius: 18rpx 0rpx 50rpx 0rpx;
		position: absolute;
		left:0rpx;top:0rpx;
		width: 280rpx;
		padding: 6rpx 5rpx 4rpx 5rpx;
		color: #FFFFFF;
		text-align: center;
		font-size: 28rpx;
		
	}
}

	.custom-style {
		background: #4B536A;
		color: #FFFFFF;
		border-radius: 50rpx;
		border: none;
	}
</style>
